<script setup>
import { ref } from 'vue';
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const modules = ref([Navigation, Pagination]);
const props = defineProps([ 'skuList' ])
const emit = defineEmits(['pickSku'])
</script>

<template>
  <swiper :modules="modules" slides-per-view="auto" navigation>
    <swiper-slide v-for="item in skuList" :key="item">
      <div class="sku-lists">
        <img
          :src="sku?.thumb"
          v-for="sku in item"
          :key="sku"
          alt=""
          @click="emit('pickSku', sku)"
        >
      </div>
    </swiper-slide>
  </swiper>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 120px;
  border-radius: 15px;
  img {
    width: 100%;
    height: 120px;
    cursor: pointer;
    border-radius: 15px;
    object-fit: cover;
  }
  &:hover :deep(.swiper-button-next), &:hover :deep(.swiper-button-prev) {
    display: flex !important;
  }
}
:deep(.swiper-button-next), :deep(.swiper-button-prev) {
  width: 30px;
  height: 30px;
  color: #999;
  background: #fff;
  border-radius: 50%;
  display: none !important;
  &::after {
    font-size: 16px;
  }
}
.sku-lists {
  width: 100%;
  height: 100%;
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
</style>